.myWrap {
  display: flex;
  flex-direction: column;
  min-height: 10vh;
  width: 100%;
  background-color: #fff;
  .title-bar {
    background-color: #e93d2f;
  }

  .user-vip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30rpx;
    background-color: #e93d2f;
    .vip-avatar {
      display: flex;
      align-items: center;
      padding-left: 35rpx;
      .avatar-img {
        display: block;
        width: 85rpx;
        height: 85rpx;
        border-radius: 85rpx;
        border: 3rpx solid #ffffff;
      }
      .vip-text {
        display: flex;
        flex-direction: column;
        margin-left: 25rpx;
        .text-name {
          color: #fff;
          font-weight: 500;
          font-size: 30rpx;
        }
        .text-vip {
          margin-top: 7rpx;
          color: #ffc5c5;
          font-size: 24rpx;
        }
      }
    }

    .vip-discount {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 136rpx;
      height: 46rpx;
      border-radius: 50rpx;
      border: 2rpx solid #fff;
      margin-right: 30rpx;
      z-index: 999;
      .discount-img {
        width: 26rpx;
        height: 26rpx;
        margin-right: 5rpx;
      }
      .discount-text {
        margin-left: 6rpx;
        font-size: 24rpx;
        color: #fff;
      }
    }
  }

  .code_bj_img {
    width: 394rpx;
    height: 394rpx;
    position: absolute;
    top: -100rpx;
    right: 50rpx;
    z-index: 99;
  }

  .vip-category {
    background: linear-gradient(180deg, #e93d2f 0%, #ffffff 100%);
    padding-bottom: 60rpx;
    padding: 52rpx 25rpx 0 25rpx;

    .package-wrap {
      position: relative;
      z-index: 999;
      padding: 52rpx 0 46rpx 0;
      background-color: #fff;
      border-radius: 35rpx 35rpx 0 0;

      .vip_title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333333;
        line-height: 42rpx;
        margin-left: 33rpx;
        margin-bottom: 24rpx;
      }

      .package-list {
        overflow: hidden;
        overflow-x: scroll !important;
        display: -webkit-box;
        padding: 0 33rpx;
      }

      .package-item {
        width: 300rpx;
        height: 416rpx;
        background: #fffbf2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 15rpx;
        position: relative;
        line-height: 1;
        border: 1rpx solid #f3efe3;
        background-image: url("/static/img/my/vip/vip_bj.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        margin-right: 21rpx;
        &:last-child {
          margin-right: 0;
        }

        .type {
          margin-top: 33rpx;
          font-size: 28rpx;
          line-height: 1;
          font-weight: 600;
          color: #8c4243;
          text-align: center;
        }

        .num {
          margin-top: 26rpx;
          color: #fd3424;
        }

        .vip_tips {
          margin-top: 26rpx;
          font-size: 26rpx;
          color: #8c4243;
        }

        .just_need {
          margin-top: 20rpx;
          padding: 10rpx 40rpx;
          background-color: #ffecc8;
          border-radius: 5rpx;
          color: #b08432;
        }

        .openVip {
          margin-top: 55rpx;
          background: linear-gradient(180deg, #fef8bc 0%, #feba6c 100%);
          box-shadow: 0rpx 4rpx 10rpx 0rpx #df261a;
          border-radius: 52rpx;
          padding: 20rpx 45rpx;
          font-size: 28rpx;
          font-weight: 600;
          color: #e83a1f;
        }
      }
    }
  }

  .ticket {
    padding: 0 25rpx;

    .ticket_title {
      margin-left: 33rpx;
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
      line-height: 42rpx;
    }

    .normal_title,
    .expert_title {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 42rpx;
      text-align: center;
      font-size: 36rpx;
      font-weight: 600;
      color: #333333;
      line-height: 47rpx;
      &::after,
      &::before {
        content: "";
        display: inline-block;
        width: 77rpx;
        height: 2rpx;
        background-color: #d8d8d8;
        border-radius: 1rpx;
      }

      &::before {
        margin-right: 20rpx;
      }

      &::after {
        margin-left: 20rpx;
      }
    }

    .normal_ticket,
    .expert_ticket {
      margin-top: 30rpx;
      .normal_item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #ffffff;
        box-shadow: 2rpx 7rpx 12rpx 0rpx rgba(0, 0, 0, 0.05);
        border-radius: 23rpx;
        border: 1rpx solid #f4f4f4;
        margin-bottom: 30rpx;
        &:last-child {
          margin-bottom: 0rpx;
        }
        .normal_img {
          display: block;
          width: 224rpx;
          height: 178rpx;
        }

        .ticket_num {
          width: 207rpx;
          height: 122rpx;
          background-image: url("/static/img/my/vip/vouchers_icon.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-position: center;
          text-align: center;
          line-height: 122rpx;
          font-size: 43rpx;
          color: #e23331;
          font-weight: 500;
          white-space: nowrap;
        }

        .ticket_price {
          margin-right: 23rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          line-height: 1;
          .symbol {
            font-size: 23rpx;
          }
          .price {
            color: #fe352b;
            font-size: 49rpx;
          }

          .price1 {
            font-size: 20rpx;
            color: #fe352b;
            line-height: 23rpx;
            margin: 10rpx 0;
          }

          .buy_btn {
            padding: 20rpx 48rpx;
            background: linear-gradient(90deg, #fd2624 0%, #fb5a3d 100%);
            border-radius: 52rpx;
            color: #fff;
            font-size: 28rpx;
          }
        }
      }
    }

    .expert_title {
      margin-top: 60rpx;
    }

    .expert_tips {
      margin: 20rpx auto 46rpx auto;
      width: 550rpx;
      font-size: 26rpx;
      padding: 12rpx 35rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff6ec;
      border-radius: 156rpx;
      border: 1rpx solid #fde5c9;
      text-align: center;

      .dot {
        display: block;
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background: #ffb067;
        margin: 0 20rpx;
      }
    }
  }

  .showBuyVip {
    background: #fff2ea;
    padding: 0 53rpx;
    border-radius: 30rpx;
    .title {
      font-size: 42rpx;
      font-weight: 700;
      color: #333333;
      line-height: 55rpx;
      text-align: center;
      margin-top: 40rpx;
    }

    .content {
      margin-top: 50rpx;
      padding: 36rpx 43rpx 26rpx 47rpx;
      border-radius: 21rpx;
      background: #fff;
      .vip_info {
        display: flex;
        justify-content: space-between;
        .info_left {
          .vip_name {
            font-size: 34rpx;
            font-weight: 700;
            color: #333333;
            line-height: 45rpx;
          }

          .vip_old_price {
            font-size: 24rpx;
            margin-top: 17rpx;
            color: #333333;
            line-height: 32rpx;
            .price {
              text-decoration: line-through;
            }
          }
        }

        .info_right {
          .vip_price {
            font-size: 40rpx;
            font-weight: 700;
            color: #333333;
            line-height: 53rpx;
            text-align: right;
          }

          .info_tips {
            float: right;
            padding: 5rpx 0rpx 5rpx 15rpx;
            background: linear-gradient(
              100deg,
              #fee6da 0%,
              rgba(255, 207, 183, 0) 100%
            );
            border-radius: 51rpx;
            font-size: 24rpx;
            font-weight: 500;
            color: #e75017;
            line-height: 40rpx;
            text-align: center;
          }
        }
      }

      .line {
        position: relative;
        width: 555rpx;
        height: 1rpx;
        background-color: #d8d8d8;
        margin: 41rpx auto 31rpx auto;
        opacity: 0.8;
        .line_dot {
          width: 30rpx;
          height: 30rpx;
          border-radius: 50%;
          background-color: #fff2ea;
          position: absolute;
          top: -15rpx;
        }
        .dot1 {
          left: -60rpx;
        }

        .dot2 {
          right: -60rpx;
        }
      }

      .vip_policy {
        font-size: 24rpx;
        color: #333333;
        line-height: 46rpx;
      }
    }

    .buy_btn {
      width: 648rpx;
      height: 108rpx;
      background: linear-gradient(90deg, #fd2624 0%, #fb5a3d 100%);
      border-radius: 100rpx;
      text-align: center;
      line-height: 108rpx;
      color: #fff;
      font-size: 36rpx;
      margin: 46rpx 0 40rpx 0;
    }

    .xiyi {
      display: flex;
      align-items: center;
      justify-content: center;
      // color: #1c87f3;
      color: #999;
      font-size: 28rpx;
      text-align: center;
      margin-bottom: 40rpx;
      .text {
        color: #999;
      }

      /deep/.uni-checkbox-input {
        border-radius: 50%;
      }
    }
  }
}

.mt-scroll {
  height: 100%;
}

.fs35 {
  font-size: 35rpx;
}

.fz56 {
  font-size: 56rpx !important;
}

.bold {
  font-weight: 600 !important;
}

// .topBar{
//   // padding-top: var(--status-bar-height);
//   background-color: #e93d2f;

//   .arrow_left {
//     position: absolute;
//     top: var(--status-bar-height);
//     left: 32rpx;
//     z-index: 999999;
//   }
// }
